<template>
  <div class="contract">
    <div class="img">
      <img
        :src="$api.imgProjectUrl + '/uploads/contract/' + info.logo"
        :onerror="errorImg"
        alt=""
      />
    </div>
    <div class="wrapper">
      <h1>{{ str(info.title, 45) }}</h1>
      <span class="money"
        >投资金额：<span class="text-warning">{{ info.money }}</span> 元</span
      >
      <div class="btn">
        <a-button type="primary" size="small" class="sign" @click="seeContract"
          >查看签署</a-button
        >
        <a-button type="primary" size="small" @click="downloadContract"
          >下载</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { str } from "@/tool/lib";
export default {
  name: "contract",
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      errorImg: 'this.src="' + require("@/assets/img/tuliec.png") + '"'
    };
  },
  methods: {
    str(text, length) {
      return str(text, length);
    },
    seeContract() {
      this.$ajax
        .post(this.$api.seeContract, { id: this.info.id })
        .then(res => {
          window.location.href = res.data.url;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    downloadContract() {
      this.$ajax
        .post(this.$api.downContract, { id: this.info.id })
        .then(res => {
          window.location.href = res.data.res;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.contract {
  padding: 18px;
  margin: 27px 30px;
  webkit-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  -moz-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  border-radius: 5px;
  .flex_content();
  position: relative;
  .img {
    width: 160px;
    margin-right: 32px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  h1 {
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    display: block;
    word-break: normal;
  }
  .money {
    font-size: 20px;
    color: #575757;
  }
  .wrapper {
    .flex_one();
  }
  .btn {
    text-align: right;
    margin-top: 50px;
    .ant-btn-sm {
      height: 50px;
      padding: 0 20px;
    }
  }
  .sign {
    margin-right: 18px;
  }
}
</style>
